<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bolder">工作看板</span>
      <el-button icon="el-icon-edit" size="small" @click="goWork">创建工作</el-button>
      <el-button icon="el-icon-upload"  @click="goInfo" size="small" type="primary" style="margin-right: 10px">加载工作</el-button>
    </div>
    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我发起的工作" name="first" style="font-size: clamp(0.5rem, 0.319rem + 0.74vw, 0.875rem);">
          <el-row type="flex" style="margin-left: 14px;">
            <el-radio-group v-model="radio" size="mini" @change="Radios">
              <el-radio-button label="进行中"></el-radio-button>
              <el-radio-button label="已完结"></el-radio-button>
              <el-radio-button label="已超时"></el-radio-button>
            </el-radio-group>
          </el-row>

          <!-- <p style="border-top: 1px dashed gainsboro;margin: 0 10px;"></p> -->

          <!-- 卡片头部 -->
          <div v-if="radio === '进行中'" v-show="!isCard">
           <div class="first-card" v-if="this.infoList.length > 0">
            <el-card class="card" :style="{ backgroundColor: item.num > 0 ? '#ffccc7' : 'white' }"
              v-for="(item, index) in infoList" :key="index">
              <div slot="header">
                <span style="font-weight: bolder;cursor: pointer;" @click="isShowTable" class="span">{{ item.jobName }}</span>
                 <!-- 删除按钮 -->
                 <el-button icon="el-icon-delete" type="text" style="float: right; padding: 3px 0;margin-left: 10px;" @click="del(item.id)"></el-button>

                <!-- 编辑按钮 -->
                <el-button icon="el-icon-edit" type="text" style="float: right; padding: 3px 0" @click="edit(item.id,item)"></el-button>

              </div>
              <!-- 卡片中部 -->
              <div class="main">
                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="8">创建人</el-col>
                  <el-col :span="16">
                    <div style="float: right">{{ item.rincipalIdlId }}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="8">创建时间</el-col>
                  <el-col :span="16">
                    <div style="float: right">{{ item.createTime }}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="8">完成时间</el-col>
                  <el-col :span="16">
                    <div style="float: right">{{ item.planOverDate }}</div>
                  </el-col>
                </el-row>

                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="10">任务完成情况</el-col>
                  <el-col :span="14">
                    <div style="float: right">{{ item.status }}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-around" class="main-row" style="padding-bottom: 18px;">
                  <el-col :span="10">任务红灯数量</el-col>
                  <el-col :span="14">
                    <div style="float: right">{{ item.num }}</div>
                  </el-col>
                </el-row>
              </div>

              <!-- 腿部 -->
              <el-row style="width: 90%; float: right">
                <el-col :span="8" class="footer-cb"><span>即时催办</span></el-col>
                <el-col :span="8" class="footer-gs"><span @click="preview(item)">工作概览</span></el-col>
                <el-col :span="8" class="footer-yj"><span>工作意见</span></el-col>
              </el-row>
            </el-card>

            <!-- 数据表格 -->

          </div>
          <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>

          <!-- 表格组件放置处 -->
          <div v-show="isCard">
            <el-page-header @back="isCard = !isCard" v-if="radio === '进行中'" style="display: block; margin-top:15px;margin-bottom: 10px;background: aliceblue;"></el-page-header>
            <!-- 表格 -->
            <el-table :data="tableData" v-if="radio === '进行中'" style="width: 100%" height="665px" border :header-cell-style="{'background': '#82D1F6','color': 'black'}">
              <el-table-column label="工作描述" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.gzms }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="完成时间" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建人" min-width="180" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" class="custom-tag" :style="{ backgroundColor: getBackgroundColor(scope.$index) }">{{ scope.row.name }}</el-tag>
                    </div>
                </template>
              </el-table-column>
              <el-table-column label="交付物" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="text">{{ "交付物.zip" }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="状态" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.zt == '进行中' ? 'success' : scope.row.zt == '未开始' ? 'warning' : 'danger'" round>{{ scope.row.zt }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" min-width="200">
                <template slot-scope="scope">
                  <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                  <el-button type="text">填报</el-button>
                  <el-button type="text">概览</el-button>
                  <el-button type="text">意见</el-button>
                </template>
              </el-table-column>
            </el-table>
           </div>
          <!-- 已经完成 -->
          <div v-if="radio === '已完结'">
            <div class="first-card" v-if="this.endList.length > 0"></div>
            <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>

          <!-- 已超时 -->
          <div v-if="radio === '已超时'">
            <div class="first-card" v-if="this.finished.length > 0">
            <el-card class="card" v-for="(item, index) in finished" :key="index">
              <div class="timeOut">
                <!-- 这里的天数要通过计算得来 -->
                <span style="font-weight:800;" :style="{ backgroundColor: item.day > 9 ? '#FF2828' : 'pink' }">
                  <b v-if="item.day > 9">已超期&nbsp;&nbsp; {{ item.day }} &nbsp;&nbsp;天</b>
                  <b v-else>红灯预警&nbsp;&nbsp; {{ item.day }} &nbsp;&nbsp;天</b>
                </span>
              </div>

              <!-- 卡片中部 -->
              <div class="main">
                <span style="font-weight: bolder;margin-left:13px;">{{ item.xm_mc }}</span>
                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="10">完成时间</el-col>
                  <el-col :span="14">
                    <div style="float: right">{{ item.endTime }}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="space-around" class="main-row">
                  <el-col :span="10">发起人</el-col>
                  <el-col :span="14">
                    <div style="float: right">{{ item.principal }}</div>
                  </el-col>
                </el-row>

                <el-row type="flex" justify="space-around" class="main-row" style="padding-bottom:10px;">
                  <el-col :span="10">任务来源</el-col>
                  <el-col :span="14">
                    <div style="float: right">{{ item.rw_ly }}</div>
                  </el-col>
                </el-row>
              </div>

              <!-- 腿部 -->
              <el-row style="width: 90%; float: right">
                <el-col :span="8" class="footer-cb"><span>即时催办</span></el-col>
                <el-col :span="8" class="footer-gs"><span @click="preview(item)">工作概览</span></el-col>
                <el-col :span="8" class="footer-yj"><span>工作意见</span></el-col>
              </el-row>
            </el-card>
          </div>
          <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>


        </el-tab-pane>

        <el-tab-pane label="我参与的工作" name="second">我参与的工作</el-tab-pane>
      </el-tabs>
    </el-row>

    <!-- 修改对话框 -->
    <!-- <el-dialog title="信息编辑" :visible.sync="EditDialogVisible" width="50%">
      <div>
        <el-form ref="form" :model="form" label-width="auto" label-suffix=":" style="width: 80%; margin: 0 auto">
          <el-form-item label="创建人">
             <el-input size="small" v-model="form.rincipalIdlId" disabled placeholder="请输入工作项名称"></el-input>
           </el-form-item>
          <el-form-item label="工作项名称" style="margin-left: 15px;">
             <el-input size="small" v-model="form.jobName" placeholder="请输入工作项名称"></el-input>
           </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="9">
                <el-form-item label="开始时间" style="margin-left:-100px;">
                  <el-date-picker size="small" type="date" placeholder="选择日期" v-model="form.createTime" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="15">
                <el-form-item label="完成时间">
                  <el-date-picker size="small" type="date" placeholder="选择日期" v-model="form.planOverDate" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="任务完成情况" style="margin-left: 30px;">
               <el-input size="small" v-model="form.status" placeholder="请输入任务完成情况进度"></el-input>
          </el-form-item>
          <el-form-item label="任务完成数量" style="margin-left: 30px;">
               <el-input size="small" v-model="form.num" placeholder="请输入任务完成数量"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog> -->
  </el-card>
</template>

<script>
import utils from "@/utils/util.js";
import { queryAllJobByUserIdAPI } from "../api/user.js";
var _index;
export default {
  name: "WorkBoard",
  data() {
    return {
      activeName: "first",
      radio: "进行中",
      idx: 0,
      isCard: false,
      // 进行中的数据
      /**
       * jobName: item.jobName, //工作名称
          rincipalIdlIdId: item.rincipalIdlIdId, //创建人
          createTime: utils.changeTime(item.createTime), //开始时间
          planOverDate: utils.changeTime(item.planOverDate), //结束时间
          jobState: item.jobState,    // 任务类型 0：未发布 1：进行中 2：已完结
          status: "0/2", //完成状态
          num: "0", //完成数量
          id: index
       * */
      infoList: [
        {
          id: 0,
          jobName: "某某某专项工作可研编写-初稿",
          principalId: "产品部门/欧阳张三",
          createTime: "2023-01-05",
          planOverDate: "2023-03-15",
          status: "0/3",
          num: "2"
        },
        {
          id: 1,
          jobName: "某某项目研发工作",
          principalId: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "1"
        },
        {
          id: 2,
          jobName: "Q1季度某某工作评审",
          rincipalIdlId: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "0"
        },
        {
          id: 3,
          jobName: "某某某专项工作实施方案-初稿",
          principalId: "产品部门/欧阳张三",
          createTime: "2023-01-05",
          planOverDate: "2023-03-15",
          status: "0/3",
          num: "2"
        },
        {
          id: 4,
          jobName: "某某系统研发工作",
          principalId: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "1"
        },
        {
          id: 5,
          jobName: "2024年Q1季度专项工作",
          rincipalIdlId: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "0"
        }
      ],
      // 已完结
      endList: [],
      // 已完成的数据
      finished: [
        {
          id: 0,
          day: 10,
          xm_mc: "某某某专项工作可研编写-初稿",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 1,
          day: 10,
          xm_mc: "某某项目研发工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 2,
          day: 10,
          xm_mc: "某某某专项工作实施方案-初稿",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 3,
          day: 4,
          xm_mc: "某某系统研发工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 4,
          day: 6,
          xm_mc: "2024年Q1季度专项工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 5,
          day: 7,
          xm_mc: "2024年Q1季度专项工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        }
      ],
      // 已完结
      endList:[],
      // 已完成的数据
      finished:[
         {
            id:0,
            day:10,
            xm_mc:"某某某专项工作可研编写-初稿",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
         {
            id:1,
            day:10,
            xm_mc:"某某项目研发工作",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
         {
            id:2,
            day:10,
            xm_mc:"某某某专项工作实施方案-初稿",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
         {
            id:3,
            day:4,
            xm_mc:"某某系统研发工作",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
         {
            id:4,
            day:6,
            xm_mc:"2024年Q1季度专项工作",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
         {
            id:5,
            day:7,
            xm_mc:"2024年Q1季度专项工作",
            endTime: "2023-03-15",
            principal: "产品部门/欧阳张三",
            rw_ly:'2024年Q1督办工作'
         },
      ],
      // 是否显示弹框
      // EditDialogVisible: false,
      // 编辑
      form: {
        workname: "",
        startTime: "",
        endTime: "",
        type: [],
        finishTime: 0,
        status: "",
        num: "",
      },
      tableData: [
        {
          gzms:"某某某专项工作可研编写-初稿",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          zt: "未开始",
        },
        {
          gzms:"某某项目研发工作",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          zt: "红灯",
        },
        {
          gzms:"Q1季度某某工作评审",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          zt: "进行中",
        },
        {
          gzms:"某某某研发项目工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "未开始",
        },
        {
          gzms:"2024年Q2季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "未开始",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
        {
          gzms:"2024年Q3季度专项工作",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zt: "红灯",
        },
      ]
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    // 注册事件监听
    this.$bus.$on("getFormData", this.handleFormData);
    // 手动创建的工作清单
    this.$bus.$on("getFormDataAll", this.handleFormDatas);
  },
  beforeDestroy() {
    // 移除事件监听
    this.$bus.$off("getFormData", this.handleFormData);
    this.$bus.$off("getFormDataAll", this.handleFormDatas);
  },
  methods: {
    // 按钮添加颜色
    getBackgroundColor(index) {
      const colors = ['#B4FDFF', '#CEE7FF', '#75F9FD', '#FFBF6C','#CEE7FF'];
      return colors[index % colors.length];
    },
    // 根据用户id查询用户任务卡片
    async getList() {
      const res = await queryAllJobByUserIdAPI({});
      console.log("根据用户id查询用户任务卡片", res);
      let list = [];
      res.data.forEach((item, index) => {
        list.push({
          jobName: item.jobName,
          principalId: item.principalId,
          createTime: utils.changeTime(item.createTime),
          planOverDate: utils.changeTime(item.planOverDate),
          jobState: item.jobState, // 任务类型 0：未发布 1：进行中 2：已完结
          status: "0/2",
          num: "0",
          id: index,
        });
        })
      list.reverse();
      this.infoList = list;
    },
    // 是否显示表格
    isShowTable() {
      console.log("需要显示")
      this.isCard = true
    },
    // Excel表格识别生成创建的卡片
    handleFormData(data) {
      console.log(data); // 打印data值，确认是否收到数据
      console.log("Before push:", this.infoList); // 打印操作前的infoList
      this.infoList.push(data);
      console.log("After push:", this.infoList); // 打印操作前的infoList
    },
    // 手动创建的卡片
    handleFormDatas(data) {
      console.log(data);
      this.infoList = this.infoList.concat(data);
      console.log("After push:", this.infoList);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 切换按钮显示状态
    Radios(val) {
      console.log(val);
      this.radio = val;
    },
    // 编辑
    edit(id,item) {
      _index = id
      // 做数据回显
      console.log(id);
      console.log('item',item)
      // this.form = item
      this.form = { ...item }; // 浅拷贝 item，避免直接修改原始对象
      this.form = {...item};  // 浅拷贝 item，避免直接修改原始对象
      // this.EditDialogVisible = true;
      // 路由跳转
      //bus传值 =====> 注意把异步改成同步
      setTimeout(() => {
        // this.$bus.$emit("infoListData", { ...this.form })}, 0);
        this.$bus.$emit('infoListData',{...this.infoList[_index]})},0);
      //页面跳转
      this.$router.push({
        name: "LoadWork",
      });
    },
    // 删除卡片
    del(idx) {
      this.idx = idx;
      console.log(this.idx);
      if (idx == 0) {
        this.$message({
          message: "只有一条数据,不能删除!!!",
          type: "warning",
        });
      } else {
        //删除一条数据
        this.infoList.splice(idx, 1);
        this.$message.success("删除卡片数据成功");
      }
    },

    // 确定修改信息
    // confirm() {
    //   var editData = _index
    //   if(!this.infoList[editData].num) return
    //   this.infoList[editData].jobName = this.form.jobName
    //   this.infoList[editData].createTime = this.form.createTime
    //   this.infoList[editData].planOverDate = this.form.planOverDate
    //   this.infoList[editData].num = this.form.num
    //   this.infoList[editData].status = this.form.status
    //   console.log('this.infoList',this.infoList[editData].num);
    //   this.EditDialogVisible = false;
    //   this.$message.success('修改信息成功');
    // },
    // 关闭
    // close() {
    //   this.$refs.form.resetFields();
    //   this.EditDialogVisible = false;
    // },

    goInfo() {
      this.$router.push({
        name: "LoadWork"
      });
    },
    // 创建工作
    goWork() {
      this.$router.push({
        name: "CreateWork"
      });
    },
    // 跳转到工作概览
    preview(data) {
      console.log(data)
      this.$router.push({
        name:'Echarts'
      })
    }
  }
};
</script>

<style scoped lang="less">
.box-card {
  height: 93vh;
  overflow: auto;
}

.clearfix {
  // height: 100px;
  button {
    float: right;
    // margin-top: 20px;
    // padding: 3px 0;
  }
}

.first-card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 12px;
  .card {
    font-size: clamp(0.5rem, 0.319rem + 0.74vw, 0.875rem);
    // 使用属性进行控制的
    // background-color: #ffccc7;
    // min-width: 24vw;
    min-width: 19rem;
    margin: 12px;
    .main {
      width: 100%;
      margin: -20px auto 12px auto;
      border-radius: 10px;
      background-color: rgb(247, 247, 247);

      &-row {
        width: 90%;
        margin: 0 auto;
        padding-top: 18px;
      }
    }

    .footer-cb {
      margin-bottom: 12px;
      cursor: pointer;
      span {
        border-radius: 6px;
        padding: 4px;
        color: white;
        background-color: rgb(108, 185, 197);
      }
    }
    .footer-gs {
      margin-bottom: 12px;
      cursor: pointer;
      span {
        border-radius: 6px;
        padding: 4px;
        color: white;
        background-color: rgb(72, 175, 243);
      }
    }

    .footer-yj {
      margin-bottom: 12px;
      cursor: pointer;
      span {
        border-radius: 6px;
        padding: 4px;
        color: white;
        background-color: rgb(117, 204, 112);
      }
    }
  }
}

.span:hover{
  color:red;
}

.timeOut {
  display: flex;
  justify-content: flex-end;
  padding: 0px 0px;
  margin-bottom: 30px;
  margin-top: -20px;
  span {
    width: 140px;
    height: 30px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: white;
    line-height: 30px;
    border-radius: 10px;
  }
}

/deep/ .el-card {
  border-radius: 15px !important;
}

/deep/ .el-card__header {
  border: none !important;
}

// 按钮样式的修改
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #FFF;
    border-color: #409EFF;
    -webkit-box-shadow: -1px 0 0 0 #409EFF;
    box-shadow: -1px 0 0 0 #409EFF;
    background: #192C7D;
    box-shadow: 0px 8px 20px 0px rgba(69,145,255,0.15);
    border-radius: 3px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  background: rgb(206, 231, 255);
}

.no-data {
  text-align: center;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.no-data img {
  width: 150px;
}

.desc {
  color: #7f7f7f;
  margin-top: 10px;
}


// 表格样式
.custom-tag {
  box-shadow:
        3px 2px 3px rgba(192, 192, 192, 0.08), /* 右下方向阴影 */
        -3px 2px 3px rgba(192, 192, 192, 0.08), /* 左下方向阴影 */
        3px -2px 3px rgba(192, 192, 192, 0.08), /* 右上方向阴影 */
        -3px -2px 3px rgba(192, 192, 192, 0.08); /* 左上方向阴影 */
    transition: box-shadow 0.01s ease;
  border-radius: 10px;
  color: black;
  border: none;
}
</style>
